<template>
  <div class="news">
    <Header active="3" />
    <!-- banner -->
    <div class="page_banner" :style="'background-image:url(' + cateInfo.image + ')'">
        <div class="page-inner">
            <h1 class="f60 font-b">{{cateInfo.name}}</h1>
        </div>
    </div>
    <!-- tabs -->
    <Tabs :tabsList="navList" />
    <!-- list -->
    <div class="page-inner list">
      <ul>
        <li
        class="new_item flex"
        v-for="(i, index) in dataList"
        :key="index"
        @click="newClick(i.id)"
      >
        <div class="info">
          <p class="dot f24 font-m">{{ i.title }}</p>
          <p class="dot3 f16 font-r text">{{ i.description }}</p>
          <span class="f18 font-l date">{{ i.show_time }}</span>
        </div>
        <div class="img_box">
          <img :src="i.image" />
        </div>
      </li>
      </ul>
    </div>
    <!-- Pagination -->
    <Pagination :total="total" :count="3" @change="pageChange"/>
  </div>
</template>


<script>
import { getArticleLists,getCategoryList,getCloumnList } from '@/api/sections'
export default {
	data() {
	    return {
			total:0,
			page:1,
			cateInfo:{},
			navList:[],
			NewsTabs:[{ id: "0", name: "新闻", url: "/News" }],
			dataList:[]
	    }
	},
    mounted:function(){
		this.initData()
		getCategoryList({'cid':1422}).then((res)=>{
			  this.cateInfo=res.data
			  this.navList=[res.data]
		})
    },
	methods:{
		pageChange(e){
			this.page=e
			this.getData()
		},
		initData(){
			this.getData()
		},
		getData(){
			let post={
				page:this.page,
				limit:10,
				cid:1431
			}
			getArticleLists(post).then((res)=>{
				console.log(res,1111)
				  this.dataList=res.data.data
				  this.total=res.data.total
			})
		},
		newClick(id){
			
			  this.$router.push({
			    path: `/News/${id}`,
			  });
		}
	}
}
</script>

